<template>
  <div class="serve">
    <div class="box" v-for="item in listServe" :key="item.id" @click="pay(item)">
      <template v-if="item.goods">
        <van-image class="goods-img" width="4.25rem" height="4.25rem" :src="item.goods.thumb" />
        <div class="goods-info">
          <div class="goods-title">{{item.goods.title}}</div>
          <div class="goods-content">
            <div class="left">
              <div class="consult">{{item.consult_type == 0 ? '电话咨询' : "在线咨询"}}</div>
              <div class="price">￥&nbsp;{{item.amount}}&nbsp;元</div>
            </div>
            <div class="right">
              <van-button color="#000" size="small">立即咨询</van-button>
            </div>
          </div>
        </div>
    </template>
    </div>
  </div>
</template>

<script>
import { Image } from "vant";
import mixins from "./mixin.js";
export default {
  mixins:[mixins],
  props:{
    listServe:{
      type:Array
    }
  },
  methods:{
    pay(item){
      this.$emit("consult",item);
    },

  },
  components: {
    VanImage: Image
  }
};
</script>

<style lang="scss" scoped>
::v-deep .van-button {
  align-self: flex-end;
  width: 4.7188rem;
  height: 1.375rem;
  border-radius: 0.3125rem;
}

.goods-img {
  border-radius: 0.3125rem;
  overflow: hidden;
}

.goods-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.consult {
  text-align: left;
  color: #666;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
}

.box {
  background-color: #fff;
  display: flex;
  margin-top: 1rem;
}

.goods-info {
  flex: 1;
  margin-left: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: baseline;
}

.price {
  text-align: left;
  color: #ee0101;
  font-size: 0.9375rem;
  font-weight: bold;
}
</style>
